<%--
  Created by IntelliJ IDEA.
  User: zhangDongFei
  Date: 2020/11/12
  Time: 16:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>订单表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
    <style type="text/css">
        .show {
            width: 90%;
            height: 200px;
            border-radius: 30px;
            background-color: #5bc0de;
            margin: 20px 20px 20px 20px;
        }

        .rooms {
            width: 100%;
            height: 240px;
        }

        .detail {
            width: 90%;
            height: 200px;
            margin: 20px 20px 20px 20px;
            padding-top: 20px;
        }

        .container {
            width: 89%;
            /*margin-left: 40px;*/
            /*padding-right: 50px;*/
        }
    </style>
</head>
<body>

<div class="layui-elem-field">
    <form class="layui-form layui-form-pane" id="searchOrder">
        <div class="layui-row">
            <div class="layui-inline">
                <label class="layui-form-label">电话号:</label>
                <div class="layui-input-inline">
                    <input type="text" name="tel" class="layui-input" lay-verify="phone|number" placeholder="请输入电话号">
                </div>
                <button type="button" data-type="reload"
                        class="layui-btn layui-btn-radius layui-btn-normal layui-icon layui-icon-search"
                        lay-submit lay-filter="searchBtn">搜索
                </button>
            </div>
        </div>
    </form>
</div>

<%--// 根据订单号查询对应的订单所对应的所有的入住详情--%>
<div id="roomdInfo" style="display: none"></div>

<script id="text" type="text/html">
    <div class="container">
        <div class="layui-row">
            {{# layui.each(d.list, function(index, item){ }}
            <div class="layui-col-md4">
                <div class="rooms">
                    <form class="layui-form" style="padding-top:20px">
                        <div class="layui-form-item">
                            <label class="layui-form-label">订单号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="orderid" value="{{ item.orderid }}" class="layui-input"
                                       disabled>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">房间编号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="roomcode" value="{{ item.roomcode }}" class="layui-input"
                                       disabled>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="uname" value="{{ item.uname }}" class="layui-input" disabled>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">电话</label>
                            <div class="layui-input-inline">
                                <input type="text" name="tel" value="{{ item.tel }}" class="layui-input" disabled>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">入住时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="indate" value="{{ item.indate }}" class="layui-input" disabled>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">离开时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="leavedate" class="layui-input" value="{{ item.leavedate }}"
                                       disabled>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            {{# }); }}
        </div>
    </div>
</script>

<div id="tuifang" style="display: none">
    <form class="layui-form" action="" lay-filter="tuifanginfo">
        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label">入住详情号</label>
            <div class="layui-input-inline">
                <input type="text" name="ruzhuid" required autocomplete="off"
                       class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">订单号</label>
            <div class="layui-input-inline">
                <input type="text" name="orderid" required autocomplete="off"
                       class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">退宿时间</label>
            <div class="layui-input-inline">
                <input type="text" name="outdate" required autocomplete="off"
                       class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">退还金额/元</label>
            <div class="layui-input-inline">
                <input type="text" name="tsmoney" required autocomplete="off"
                       class="layui-input" disabled>
                <input type="hidden" name="money" required autocomplete="off"
                       class="layui-input" disabled>
                <input type="hidden" name="count" required autocomplete="off"
                       class="layui-input" value="0" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">退还押金/元</label>
            <div class="layui-input-inline">
                <input type="text" name="tsyj" required autocomplete="off"
                       class="layui-input" disabled value="0">
            </div>
        </div>
        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label">经办人</label>
            <div class="layui-input-inline">
                <input type="hidden" name="tsjbr" required autocomplete="off"
                       class="layui-input" value="${sessionScope.id}" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-inline">
                <input type="text" name="comm" required autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="tfForm">退房</button>
            </div>
        </div>
    </form>
</div>

<div id="ruzhu" style="display: none">
    <div class="grid-demo" style="margin-top: 20px;">
        <form class="layui-form" action="" lay-filter="rzdetail">
            <div class="layui-form-item">
                <label class="layui-form-label">订单号</label>
                <div class="layui-input-inline">
                    <input type="text" name="orderid" required lay-verify="required" autocomplete="off"
                           class="layui-input" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="uname" required lay-verify="required" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="tel" required lay-verify="required|phone|number" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">身份证号</label>
                <div class="layui-input-inline">
                    <input type="text" name="idcard" required lay-verify="idcard" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">房间号</label>
                <div class="layui-input-inline">
                    <input type="text" name="roomid" required lay-verify="required" autocomplete="off"
                           class="layui-input" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">入住时间</label>
                <div class="layui-input-inline">
                    <input type="date" name="indate" required lay-verify="required" autocomplete="off"
                           class="layui-input" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">入住押金:</label>
                <div class="layui-input-inline">
                    <input type="text" name="rzyj" required lay-verify="required" autocomplete="off"
                           class="layui-input" disabled>
                </div>
            </div>
            <div class="layui-form-item" style="display: none">
                <label class="layui-form-label">经办人</label>
                <div class="layui-input-inline">
                    <input type="hidden" name="rzjbr" required lay-verify="required" autocomplete="off"
                           class="layui-input" value="${sessionScope.id}" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>


<script type="text/html" id="barDemo">
    {{#
    var fn = function(rdate,count,a,b,status){
    let dates = rdate.split("-");
    var rzdate = (new Date()).setFullYear(Number(dates[0]),Number(dates[1])-1,Number(dates[2]));

    var now = new Date();
    var nowTime = now.getTime();
    if(rzdate > nowTime){
        if(status==10){
            return '<a class="layui-btn layui-btn-disabled layui-btn-xs">已取消</a>';
        }
        return '<a class="layui-btn layui-btn-disabled layui-btn-xs">未处理</a>'+'<a class="layui-btn layui-btn-xs" lay-event="del">取消</a>';
    }else {
        if(count>a){
            if(a>b){
                return '<a class="layui-btn layui-btn-xs" lay-event="edit">入住</a>'+'<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="show">详情</a>';
            }else if(a==b){
                if(a==0){
                    if(status==10){
                        return '<a class="layui-btn layui-btn-disabled layui-btn-xs">已取消</a>';
                    }
                    return '<a class="layui-btn layui-btn-xs" lay-event="edit">入住</a>'+'<a class="layui-btn layui-btn-xs" lay-event="del">取消</a>';
                }else{
                        if(status==10){
                            return '<a class="layui-btn layui-btn-disabled layui-btn-xs">已取消</a>'+'<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="show">详情</a>';
                        }
                        return '<a class="layui-btn layui-btn-xs" lay-event="edit">入住</a>'+'<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="show">详情</a>'+'<a class="layui-btn layui-btn-xs" lay-event="del">取消</a>';
                }
            }
        }else if(count==a){
            return '<a class="layui-btn layui-btn-disabled layui-btn-xs">已分完</a>'+'<a class="layui-btn layui-btn-danger layui-btn-xs"
                                                                                      lay-event="show">详情</a>';
        }else{
            return '<span>'+a+' '+count+' '+b+'</span>';
        }
    }
    };
    }}
    {{ fn(d.rzdate,d.count,d.a,d.b,d.status) }}
</script>
<div id="roomdetails" style="display: none"></div>

<script id="demo" type="text/html">
    <div class="container">
        <div class="layui-row">
            {{# layui.each(d.list, function(index, item){ }}
            <div class="layui-col-md2">
                <div class="rooms">
                    <div class="show">
                        <div class="detail">
                            <span style="font-size: 30px; color: whitesmoke">{{ item.roomcode }}</span><br>
<%--                            <span style="font-size: 15px; color: whitesmoke">房间状态: {{ item.status }}</span><br>--%>
                            <div class="layui-btn-container" style="margin-top: 20px;">
                                {{# if(item.status==0) { }}
                                <button type="button" class="layui-btn layui-btn-primary"
                                        onclick="ruzhu('{{item.id}}')">入住
                                </button>
                                {{# } }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{# }); }}
        </div>
    </div>
</script>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script>
    var $;
    var layer;
    var form;
    layui.use(['table', 'layer', 'form', 'jquery', 'laytpl', 'util'], function () {
        var table = layui.table;
        var layer = layui.layer;
        $ = layui.jquery;
        form = layui.form;
        var laytpl = layui.laytpl;
        var util = layui.util;
        var condition = "";

        let typeInfo;
        $(function () {
            $.ajax({
                url: "${pageContext.request.contextPath}/order/roomtype",
                type: "POST",
                data: {},
                dataType: "JSON",
                success: function (res) {
                    typeInfo = res;
                }
            })
            showTable();
        })

        //查询的提交事件
        form.on('submit(searchBtn)', function (data) {
            condition = "";
            if (data.field.tel != null && data.field.tel.trim() !== "") {
                condition += " and o.tel=" + data.field.tel.trim() + " ";
            }
            showTable();
            return false;
        });

        function showTable() {
            // 获取所有待入住的房间信息 根据房间类型
            table.render({
                elem: '#test' //id为test的table
                , limit: 5
                , limits: [5, 10, 15]
                ,cellMinWidth: 100
                , request: {
                    pageName: 'curr' //页码的参数名称，默认：curr
                    , limitName: 'nums' //每页数据量的参数名，默认：nums
                },
                where: {condition: condition}
                , url: '${pageContext.request.contextPath}/order/orderInfo'   //url 查询数据   所有的客户的数据
                // , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , title: '订单表'
                , cols: [[
                    {field: 'id', title: 'ID', fixed: 'left', sort: true}
                    , {field: 'name', title: '姓名'}
                    , {field: 'tel', title: '电话',width: 130}
                    , {
                        field: 'roomtype', title: '房间类型' , templet: function (res) {
                            // 循环获得到 房间类型所对应的房间类型名
                            let name = "";
                            $.each(typeInfo, function (index, item) {
                                if (res.roomtype == item.id) {
                                    name = item.name;
                                    return;
                                }
                            })
                            return name;
                        }
                    }
                    , {field: 'count', title: '房间数量',width: 80}
                    , {field: 'rzdate', title: '入住时间',width: 130}
                    , {field: 'leavedate', title: '离店时间',width: 130}
                    , {field: 'price', title: '总价/元'}
                    , {field: 'createtime', title: '创建时间',width: 130}
                    , {field: 'a', title: '入住记录'}
                    , {field: 'b', title: '退房记录'}
                    , {
                        field: 'status', title: '状态', templet: function (res) {
                            switch (res.status) {
                                case 0:
                                    return "已付款";
                                case 1:
                                    return "正在入住中";
                                case 2:
                                    return "已退房";
                                case 10:
                                    return "已取消"; // 退订单
                                case 4:
                                    return "超时未退房";
                            }
                        }
                    }
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo',width: 203}
                ]]
                , page: true
                , done: function(res, curr, count){
                    $("[data-field='a']").css('display','none');
                    $("[data-field='b']").css('display','none');
                }
            });
        }

        showTable();

        function showRoom(roomtype) {
            //弹出即全屏
            let roomlist = "";
            $.ajax({
                url: "${pageContext.request.contextPath}/order/getRoomByTid",
                dataType: "JSON",
                data: {id: roomtype, status: "0"},
                async: false,
                success: function (text) {
                    roomlist = text;
                }
            });
            var data = { //数据
                "title": "客房"
                , "list": roomlist
            }
            var getTpl = demo.innerHTML;
            var view = document.getElementById('roomdetails');
            laytpl(getTpl).render(data, function (html) {
                view.innerHTML = html;
            });
        }

//监听行工具事件  test  表格的id
        table.on('tool(test)', function (obj) {
            //obj 代表 一行的内容
            var datas = obj.data; //一行的数据
            if (obj.event === 'show') {
                let detals = "";
                $.ajax({
                    url: '${pageContext.request.contextPath}/DingDan/qqq',
                    data: {id: datas.id},
                    dataType: 'JSON',
                    async: false,
                    success: function (text) {
                        detals = text;
                    }
                })

                var data = { //数据
                    "title": "客房"
                    , "list": detals
                }
                var getTpl = text.innerHTML;
                var view = document.getElementById('roomdInfo');
                laytpl(getTpl).render(data, function (html) {
                    view.innerHTML = html;
                });


                var index = layer.open({
                    title: '入住详情展示',
                    type: 1,
                    content: $("#roomdInfo"),
                    area: ['320px', '195px'],
                    maxmin: true
                });
                layer.full(index);

            } else if (obj.event === 'edit') {
                // 将显示的数据找到并赋值到对应的框中
                // 获得到对应的押金
                showRoom(datas.roomtype);
                var index = layer.open({
                    title: '房间类型展示',
                    type: 1,
                    content: $("#roomdetails"),
                    area: ['320px', '195px'],
                    maxmin: true
                });
                layer.full(index);
                let yj;
                $.each(typeInfo, function (index, item) {
                    if (datas.roomtype == item.id) {
                        yj = item.yj;
                        return;
                    }
                })

                form.val("rzdetail", {
                    "orderid": datas.id,
                    "rzyj": yj,
                    "indate": layui.util.toDateString(new Date(), 'yyyy-MM-dd')
                });

            } else if (obj.event === 'del') {
                // 获取当前 数据
                let typeinfo = "";
                $.ajax({
                    url: "${pageContext.request.contextPath}/type",
                    dataType: "JSON",
                    data: {method:'show',id:datas.roomtype},
                    async: false,
                    success: function (rinfo) {
                        typeinfo = rinfo;
                    }
                });


                let symoney = datas.price;
                let now = new Date();
                // 先判断是否为入住时间 再判断是否大于当前时间 (new Date()).toLocaleDateString().replaceAll("/", "-")
                let dates = datas.rzdate.split("-");
                var s = (new Date()).setFullYear(Number(dates[0]), Number(dates[1]) - 1, Number(dates[2]));
                let datetime = (new Date()).toLocaleDateString().replaceAll("/", "-");
                if (now.getTime()>s) {
                    let nhour = now.getHours();
                    let sy = setValueforDate(datetime,datas.leavedate);
                    if (nhour > 17) {
                        if(sy!=0){
                            symoney = (sy - 1) * typeinfo.money*(Number(datas.count)-Number(datas.a));
                        }else {
                            symoney = 0;
                        }
                    } else {
                        symoney = sy * typeinfo.money;
                    }
                }


                form.val("tuifanginfo", {
                    'orderid': datas.id,
                    'tsmoney': symoney,
                    'outdate': datetime,
                    'count':(Number(datas.count)-Number(datas.a)),
                    'money':typeinfo.money
                });
                layer.open({
                    title: '退房记录',
                    type: 1,
                    content: $("#tuifang"),
                    area: ['400px', '400px']
                });
            }

        });
        form.on('submit(formDemo)', function (data) {
            $.ajax({
                url: "${pageContext.request.contextPath}/order/rzdetail",
                dataType: "JSON",
                data: data.field,
                async: false,
                success: function (f) {
                    if (Number(f) > 0) {
                        layer.msg("入住成功");
                        layer.closeAll();
                        form.val("rzdetail", {'uname': "", 'tel': '', 'idcard': ''})
                        table.reload('test', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        }); //只重载数据
                    }
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        // tfForm
        form.on('submit(tfForm)', function (data) {
            // alert(JSON.stringify(data.field));
            $.ajax({
                url: "${pageContext.request.contextPath}/tfang/append",
                type: "POST",
                dataType: "JSON",
                data: data.field,
                async: false,
                success: function (text) {
                    layer.msg("hello world");
                    layer.closeAll();
                    table.reload('test', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    }); //只重载数据
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        form.verify({
            idcard: [
                /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
                , '身份证号格式不正确'
            ]
        });


    });

    function ruzhu(id) {
        form.val("rzdetail", {"roomid": id})
        layer.open({
            title: '入住详情',
            type: 1,
            area: ['400px', '550px'],
            content: $("#ruzhu") //这里content是一个普通的String
        });
    }

    function setValueforDate(start,end) {
        let datem = start.split("-");
        var s = (new Date()).setFullYear(Number(datem[0]), Number(datem[1]) - 1, Number(datem[2]));

        let daten = end.split("-");
        var e = (new Date()).setFullYear(Number(daten[0]), Number(daten[1]) - 1, Number(daten[2]));

        //计算两个时间间隔天数
        if (s > e) {
            var t = s;
            s = e;
            e = t;
        }
        let d = (Number(e) - Number(s)) / (1000 * 60 * 60 * 24);
        return d;
    }

</script>
</body>
</html>